<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Store test page</title>
		<link type="text/css" href="css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){

				$.get('actions/product.json', function(data) {
					var product = $.parseJSON(data);
					$('<div> ' + product.name + ' : ' + product.price  + '</div>').appendTo('body');
				});
				$('table').selectable({filter: 'tr'});

				$('form').submit(function() {
					if ($('.ui-selected').length > 0) {
						var names = $('.ui-selected').map(function() {
							return $('td:first-child', $(this)).html();
						});		
						$('input:hidden').val(names.toArray().join(','));	
						var nameQueryString = $.param({'names' : names.toArray().join(',')});	

						$.post('http://localhost:8080/store/actions/selectedPeople.json', nameQueryString, function(data) {
							alert('data successfully submitted');
							$('tr').removeClass('ui-selected');
						});

						return false;
					} else {
						return false;
					}
				});
			});
		</script>
		<style type="text/css">
      table th {
        background-color: silver;
        border: 2px outset silver;
        font-size: 0.9em;
      }
      table#testSubject tr {
        background-color: white;
      }

table td {
        background-color: transparent;
        padding: 1px 12px;
        font-size: 0.8em;
        text-align: center;
      }
.ui-selectee {
        cursor: pointer;
      }
.ui-selectee:hover {
        background-color: #ffe4c4;
      }
      .ui-selected {
        background-color: pink !important;
      }
		</style>
	</head>
	<body>
	<h1>jQuery UI test page</h1>
	<p>
	</p>
	<table cellspacing="1" border="0">
		<thead>
			<th>Imię</th><th>Nazwisko</th><th>Miejsce urodzenia</th>
		</thead>
		<tbody>
			<tr><td>Robert</td><td>Boczek</td><td>Zakopane</td>
			<tr><td>Adam</td><td>Kudła</td><td>Złochowice</td>
			<tr><td>Łukasz</td><td>Papis</td><td>Warszawa</td>
			<tr><td>Agata</td><td>Brzozowska</td><td>Katowice</td>
			<tr><td>Julia</td><td>Paczosik</td><td>Poznań</td>
		</tbody>

	</table>
	<form action="actions/selectedPeople.json" method="post">
		<input type="hidden" name="names[]" />
		<input type="submit" value="Wyślij" />
	</form>
	
	</body>
</html>




